<template>
    <div class="w-dvw h-dvh flex justify-center items-center">
        <div class="h-[400px] text-[#8ABBD9] flex flex-col justify-center items-center ">
            <p>
                <span class="text-[50px] AlibabaPuHuiTi-3-85-Bold mr-[50px]">
                    微
                </span>
                <span class="text-[50px] AlibabaPuHuiTi-3-85-Bold">
                    光
                </span>
            </p>
            <div @click="clickStart" class="animation w-[200px] h-[60px] border-[#8ABBD9] border-[2px] text-[30px] rounded-[8px] flex justify-center items-center mt-[20px] cursor-pointer">
                start
            </div>
            <div class="h-[80px]">
                <p class="leading-[80px] text-center tracking-[2px] text-[18px]">
                    {{ renderingText }}
                </p>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { onMounted, ref } from 'vue';

const renderingText = ref('')

onMounted
(
    () =>
    {
        testGradually()
    }
)

const testGradually = () =>
{
    const text = '在众多相似的颜色中，那个有微小差别的色块就像是一道微弱的光'
    const timer = setInterval
    (
        () =>
        {
            renderingText.value = text.slice(0, renderingText.value.length + 1)
            if (renderingText.value.length === text.length) clearInterval(timer)
        }, 100
    )
}

const clickStart = () =>
{
    router.push('/game');
}
</script>
<style scoped>
.AlibabaPuHuiTi-3-85-Bold
{
    font-family: "AlibabaPuHuiTi-3-85-Bold";
}
.animation
{
    transition: all 0.2s ease-in-out;
    &:active
    {
        transform: scale(0.9);
    }
} 
</style>
